<template>
  <div class="text-[0.8rem]">
    <!-- 详情页 -->
    <el-scrollbar style="height: calc(100vh - 4rem)">
      <div class="w-full text-[var(--theme-color)] mb-2">历年视力情况</div>

      <div class="w-full flex justify-between items-center">
        <div>
          <span class="text-[0.7rem]">时间：</span>
          <el-select
            v-model="searchForm.timeType"
            class="w-[10rem]"
            filterable
            @change="getResultTrendInfos"
          >
            <el-option label="近半年" :value="3" />
            <el-option label="近一年" :value="2" />
            <el-option label="近三年" :value="1" />
          </el-select>
        </div>

        <el-radio-group v-model="radio_value" @change="handleChange">
          <el-radio-button label="裸眼视力" :value="1" />
          <el-radio-button label="球镜" :value="2" />
          <el-radio-button label="柱镜" :value="3" />
          <el-radio-button
            label="自定义"
            :value="4"
            @click="handleDataDrawer"
          />
        </el-radio-group>
      </div>

      <div id="main" ref="main" class="w-full h-[15rem]"></div>

      <div class="w-full text-[var(--theme-color)] mt-8 mb-2">检查档案记录</div>
      <el-table :data="tableData" style="height: calc(100vh - 28rem)">
        <el-table-column prop="code" label="检查单号" />
        <el-table-column prop="createdAt" label="创建时间" />
        <el-table-column label="检查项目">
          <template #default="{ row }">
            <el-tag
              v-for="item in row.projectList"
              :key="item.id"
              class="mr-1 mb-1"
              :type="item.count == 1 ? 'primary' : 'info'"
            >
              {{ item.projectName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleDetail(row)">
              <el-icon><InfoFilled /></el-icon>
              详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-drawer
        v-model="drawer"
        title="检查档案详情"
        size="80%"
        destroy-on-close
      >
        <CheckDetailPage :detailForm="detailForm" />
      </el-drawer>

      <el-drawer v-model="data_drawer" size="40%" title="选择自定义数据点">
        <el-checkbox-group v-model="searchForm.resultData">
          <el-checkbox
            v-for="(item, index) in userDefinedData"
            :key="index"
            :label="item.resultDataCn"
            :value="item.resultData"
            class="w-[49%] m-0 hover:bg-[#F1F0F0]"
          />
        </el-checkbox-group>

        <template #footer>
          <el-button @click="data_drawer = false">取 消</el-button>
          <el-button type="primary" @click="getResultTrendInfos"
            >确 定</el-button
          >
        </template>
      </el-drawer>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import * as echarts from "echarts";
import CheckDetailPage from "@/view/ManageMode/CheckList/component/DetailPage.vue";
import { handleApiResponse } from "@/utils/request.js";
import { initTime } from "@/utils/init.js";
import { GetCustomerInfoById } from "../../../../../wailsjs/go/api/CustomerApi";
import {
  ListChecklistInfos,
  ListReportResultData,
  QueryResultTrendInfos,
} from "../../../../../wailsjs/go/api/ReportApi";

onMounted(() => {
  // console.log(props.detailForm);
  getList();
  getUserDefinedData();
  handleChange(1);
});

const props = defineProps({
  detailForm: {
    type: Object,
    default: () => {},
  },
});

const searchForm = ref({
  timeType: 3,
  resultData: [],
});

const radio_value = ref(1);
const handleChange = (key) => {
  if (key == 1) {
    searchForm.value.resultData = ["ucvaRight", "ucvaLeft"];
  } else if (key == 2) {
    searchForm.value.resultData = ["right_s_avg", "left_s_avg"];
  } else if (key == 3) {
    searchForm.value.resultData = ["right_c_avg", "left_c_avg"];
  } else if (key == 4) {
    searchForm.value.resultData = [];
    handleDataDrawer();
  }

  if (key != 4) {
    getResultTrendInfos();
  }
};

// 结果趋势
async function getResultTrendInfos() {
  handleApiResponse(() =>
    QueryResultTrendInfos({
      name: props.detailForm.name,
      phone: props.detailForm.phone,
      timeType: searchForm.value.timeType,
      resultData: searchForm.value.resultData,
    })
  ).then((res) => {
    if (res.code == 0) {
      // console.log(res);
      data_drawer.value = false;
      let arr = res.data.list || [];
      let time = res.data.timestamp.map((item) => {
        return initTime(item, 2);
      });
      let names = [];
      let data = [];
      arr.forEach((item) => {
        names.push(item.resultData);
        data.push({
          name: item.resultData,
          type: "line",
          data: item.resultDataList,
        });
      });
      if (!arr || arr.length == 0) {
        names = ["左眼", "右眼"];
        data = [
          {
            name: "左眼",
            type: "line",
            data: [0],
          },
          {
            name: "右眼",
            type: "line",
            data: [0],
          },
        ];
      }
      initChart(names, time, data);
    }
  });
}

const main = ref(null);
const initChart = (names, time, arr) => {
  const myChart = echarts.init(main.value);
  var option;
  option = {
    title: {
      text: "",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: names,
      top: "3%",
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: time,
    },
    yAxis: {
      type: "value",
    },
    series: arr,
  };

  option && myChart.setOption(option);
};

const userDefinedData = ref([]); // 自定义数据点数据
async function getUserDefinedData() {
  handleApiResponse(() =>
    ListReportResultData({
      page: 1,
      size: 1234,
    })
  ).then((res) => {
    if (res.code == 0) {
      userDefinedData.value = res.data.list || [];
    }
  });
}

// 选择自定义数据点
const data_drawer = ref(false); // 自定义数据点弹窗
const handleDataDrawer = () => {
  data_drawer.value = true;
};

const tableData = ref([]); // 检查档案记录
async function getList() {
  handleApiResponse(() =>
    ListChecklistInfos({
      customerId: props.detailForm.customerId,
      relationId: props.detailForm.relationId || props.detailForm.id || null,
      page: 1,
      size: 100,
    })
  ).then((res) => {
    if (res.code == 0) {
      tableData.value = res.data.list || [];
    }
  });
}

// 详情按钮
const drawer = ref(false); // 详情弹窗
const detailForm = ref({});
const handleDetail = (row) => {
  detailForm.value = row;
  drawer.value = true;
};
</script>

<style scoped lang="scss">
</style>